<template>
    <baidu-map class="bm-view" ak="NuHLRV7IdBaPMe5Db2ZS5EG1e0imMOg4"
    :center="{lng: 104.08, lat: 30.66}" :zoom="15"
    :scroll-wheel-zoom="true"
    >
    <!-- animation="BMAP_ANIMATION_BOUNCE" -->
    <bm-marker :position="{lng: 104.068, lat: 30.67}" :dragging="true"  @click="infoWindowOpen" >
        <bm-label content="1"  :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
        :offset="{width: 3,height:2 }"/>
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">aaaa</bm-info-window>
    </bm-marker>

    <bm-marker :position="{lng: 104.078, lat: 30.67}" :dragging="true"  @click="infoWindowOpen" >
        <bm-label content="2"  :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
        :offset="{width: 3,height:2 }"/>
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">aaaa</bm-info-window>
    </bm-marker>

    <bm-marker :position="{lng: 104.1, lat: 30.67}" :dragging="true"  @click="infoWindowOpen" >
        <bm-label content="3"  :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
        :offset="{width: 3,height:2 }"/>
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">aaaa</bm-info-window>
    </bm-marker>

    <bm-marker :position="{lng: 104.12, lat: 30.654}" :dragging="true"  @click="infoWindowOpen" >
        <bm-label content="4"  :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
        :offset="{width: 3,height:2 }"/>
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">aaaa</bm-info-window>
    </bm-marker>

    <bm-marker :position="{lng: 104.048, lat: 30.66}" :dragging="true"  @click="infoWindowOpen" >
        <bm-label content="5"  :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
        :offset="{width: 3,height:2 }"/>
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">aaaa</bm-info-window>
    </bm-marker>


    </baidu-map>
</template>

<script>
import Vue from 'vue'
import Map from 'vue-baidu-map'
Vue.use(Map,{
    ak:'NuHLRV7IdBaPMe5Db2ZS5EG1e0imMOg4'
});
export default {
    components: {
        
    },
    data () {
        return {
        show: false,
    }
    },
    methods: {
        infoWindowClose () {
            this.show = false
        },
        infoWindowOpen () {
            this.show = true
        }

    // handler ({BMap, map}) {
    //     console.log(BMap, map)
    //     this.center.lng = 116.404
    //     this.center.lat = 39.915
    //     this.zoom = 15
    // }
    }
}
</script>

<style>
.bm-view {
    width: 90%;
    height: 750px;  
    margin:auto;
}
</style>
